<template>
  <div>
    <!-- <h2>计算属性</h2> -->
    <!-- <p>{{fullName}}</p>
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>
    <p>{{getUserName()}}</p>
    <p>{{getUserName()}}</p>
    <p>{{getUserName()}}</p> -->
    <input type="text" v-model.trim.lazy="xing" />
    <input type="text" v-model.trim.lazy="ming" />
    <input type="text" v-model.trim.lazy="fullName" />

  </div>
</template>

<script>
export default {
  data() {
    return {
      xing:'朱',
      ming:'家琪'
    }
  },
  computed:{
     fullName: {
    get() {
      return this.xing + ' ' + this.ming
    },
    set(value) {
      let arr = value.split(' ')
      this.xing = arr[0]
      this.ming = arr[1]
    }
  }
    // fullName () {
    //   console.log('计算机属性')
    //   return this.xing+this.ming
    // }
  },
  // methods:{
  //   getUserName(){
  //     console.log('调用方法')
  //      return this.xing+this.ming
  //   }
  // }
}
</script>

<style>

</style>